$(function () {
  let layer = layui.layer
  let form = layui.form
  // 需求1:初始化文章列表,封装函数
  initArtCateList()
  function initArtCateList() {
    axios({
      method: 'GET',
      url: '/my/article/cates',
    }).then(res => {
      // console.log(res.data)
      let arry = []
      // index是序号,每循环一次,自增1
      let index = 0
      res.data.data.forEach(ele => {
        // console.log(ele)
        index++
        arry.push(
          `
          <tr>
          <td>${index}</td>
          <td>${ele.name}</td>
          <td>${ele.alias}</td>
          <td>
            <button data-id="${ele.Id}" class="btn-edit layui-btn layui-btn-xs">编辑</button>
            <button data-id="${ele.Id}" class="btn-del layui-btn layui-btn-xs layui-btn-danger">
              删除
            </button>
          </td>
        </tr>
        `)
      });
      let str = arry.join('')
      $('tbody').empty().html(str)
    })
  }

  // 需求2:添加类别,弹出来一个选项框
  let indexAdd = null//定义一个indexAdd作为关闭的索引值
  $('#btnAdd').on('click', function () {
    // 弹出层
    indexAdd = layer.open({
      type: 1,
      title: '添加文章分类',
      area: ['500px', '250px'],
      content: `
      <form class="layui-form" id="formAdd">
      <!-- 分类名称 -->
      <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="name"
            required
            lay-verify="required"
            placeholder="请输入分类名称"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <!-- 分类别名 -->
      <div class="layui-form-item">
        <label class="layui-form-label">分类别名</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="alias"
            required
            lay-verify="required"
            placeholder="请输入分类别名"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <!-- 添加重置 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">
            确认添加
          </button>
          <button  type="reset" class="btnRes layui-btn layui-btn-primary">
            重置
          </button>
        </div>
      </div>
    </form>`
    });
  })

  // 需求3:点击弹出层的添加按钮
  $('body').on('submit', '#formAdd', function (e) {
    e.preventDefault()
    axios({
      method: 'POST',
      url: '/my/article/addcates',
      data: $(this).serialize()
    }).then(res => {
      // console.log(res.data)
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }

      layer.msg('恭喜您!添加文章分类成功')
      // 自动关闭弹窗,通过indexAdd关闭
      layer.close(indexAdd)
      initArtCateList()



    })
  })

  // 需求4:点击编辑按钮,弹出框
  let indexEdit = null
  $('tbody').on('click', '.btn-edit', function () {
    // 弹出框
    indexEdit = layer.open({
      type: 1,
      title: '修改文章分类',
      area: ['500px', '250px'],
      content: `
      <form lay-filter="formEdit" class="layui-form" id="formEdit">
      <input type="hidden" name="Id">
      <!-- 分类名称 -->
      <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="name"
            required
            lay-verify="required"
            placeholder="请输入分类名称"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <!-- 分类别名 -->
      <div class="layui-form-item">
        <label class="layui-form-label">分类别名</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="alias"
            required
            lay-verify="required"
            placeholder="请输入分类别名"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <!-- 添加重置 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button  class="layui-btn" lay-submit lay-filter="formDemo">
            确认修改
          </button>
          <button type="reset" class="btnRes layui-btn layui-btn-primary">
            重置
          </button>
        </div>
      </div>
    </form>`
    });
    // 弹出框内可以获取到数据
    let id = $(this).attr('data-id')
    // console.log(id)
    axios({
      method: "GET",
      url: '/my/article/cates/' + id,
    }).then(res => {
      // console.log(res.data.data)
      if (res.data.status != 0) {
        return layer.msg(res.data.message)
      }
      // 展示数据
      form.val('formEdit', res.data.data)
      // 需求6:点击重置,新添加的内容清空
      $('.btnRes').on('click', function (e) {
        e.preventDefault()
        form.val('formEdit', res.data.data)
      })
    })

  })

  //需求5: 点击确认修改,修改成功
  $('body').on('submit', '#formEdit', function (e) {
    e.preventDefault()
    axios({
      method: 'POST',
      url: '/my/article/updatecate',
      data: $(this).serialize()
    }).then(res => {
      // console.log(res.data)
      layer.msg('恭喜您!修改成功!')
      layer.close(indexEdit)
      initArtCateList()
    })

  })



  // 需求7:点击删除,删除这条数据
  $('tbody').on('click', '.btn-del', function () {
    let id = $(this).attr('data-id')
    // console.log(id)
    //eg1
    layer.confirm('确定删除吗?', { icon: 3, title: '提示' }, function (index) {
      //do something
      axios({
        method: 'GET',
        url: '/my/article/deletecate/' + id,
      }).then(res => {
        layer.msg('恭喜您,删除成功!')
        initArtCateList()
      })
    })
    layer.close(index);
  });


})